<template>
	<view class="container">
		<view class="module-container">
			<view class="module-container__content">
				<image v-for="(item,index) in images" mode="aspectFill" :src="item.path" :style="{height: item.height + 'px'}"></image>
			</view> 
		</view>
		
		<view class="yet-bottom">亲，拉到最底啦~</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				flair: [],
				images:[],
				screenWidth: 225
			}
		},
		onLoad(options){
			uni.showLoading({
				title:'加载中',
				icon:'none'
			})
			this.flair = uni.getStorageSync('flair');
			let self = this;
			tt.getSystemInfo({
			  success(res) {
				  if(res){
					self.screenWidth = res.screenWidth;
				  }
			  }
			});
			this.flair.map((item)=>{
				let self = this;
				uni.getImageInfo({ 
					src: item, 
					success: function (e) {
						let citem = {
							path:item,
							height: e.height * self.screenWidth / e.width
						};
						self.images.push(citem)
					}
				});
			});
			uni.hideLoading();
		}
	}
</script>

<style lang="scss">
	.module-container{
		margin-bottom: $uni-spacing-col-md;
		background: #fff;
		&__content{
			image{
				display: block;
				width: 100%;
				// height: auto;
			}
		}
	}
	.yet-bottom{
		height: 56rpx;
		margin-top: -$uni-spacing-col-md;
		line-height: 56rpx;
		text-align: center;
		font-size: $uni-font-size-mini;
		color: #bebebe;
		background-color: #f7f7f7;
	}
</style>
